<template>
  <div :class="props.hasColor ? 'logo' : 'not-color-log'">{{ appStore.systemName }}</div>
</template>

<script setup lang="ts">
import {useAppStore} from "@/store/modules/app";

interface Props {
  hasColor?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  hasColor: true
})

const appStore = useAppStore();
</script>

<style lang="scss" scoped>
.not-color-log {
  color: white;
  -webkit-background-clip: text;
  background-clip: text;
}

.logo {
  color: transparent;
  background-image: linear-gradient(-45deg, #de9f00, #FC00FF);
  background-size: 400% 400%;
  animation-name: gradient;
  animation-duration: 15s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
</style>